<!-- 订单处理，包含指派（派单），转单，办结 ，退单-->
<template>
	<view class="no-warpper">
		<view class="nl-shadow-box">
			<!-- 判断是否为办结 -->
			<view v-if="handleData.action != 'FINISH'">
				<!-- 只有在指派（派单），转单 才需要选择维修师傅-->
				<view class="nl-flex-list" @click="openPicker()" v-if="handleData.action !== 'BACK'">
					<text>维修师傅</text>
					<view :class="handleData.staffName !== ''? 'right':'right-grey'">
						{{handleData.staffName !== ''?handleData.staffName:'请选择'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<!-- 退单显示当前的维修师傅 -->
				<view class="nl-flex-list" v-else>
					<text>上级处理人</text>
					<view class="right">{{handleData.staffName}} </view>
				</view>
			</view>

			<!-- 是否收费 -->
			<view v-else>
				<view class="nl-flex-list" @click="openPickerFee()" v-if="repairObjType=='004'">
					<text>是否收费</text>
					<view :class="feeFlag !== ''? 'right':'right-grey'">
						{{feeFlag !== ''?feeFlagName:'请选择'}}
					</view>
					<u-icon class="margin-left" name="arrow-right" color="#414141" size="24"></u-icon>
				</view>
				<view class="nl-flex-list" @click="openPicker()" v-if="repairObjType=='004' && feeFlag=='100'">
					<text class="nl-margin-right">收费金额</text>
					<u-input class="input" v-model="amount" type="text" placeholder="请输入收费金额" />
				</view>
			</view>


			<!-- 处理记录 -->
			<view class="nl-flex-title">处理记录</view>
			<view class="textarea-padding">
				<u-input v-model="handleData.context" type="textarea" border  />
			</view>

			<!-- 图片上传 -->
			<uploadImg @photos="photosList()" :prompt="true" :maxCount="4"></uploadImg>

			<view class="button-lg" @click="submit()">
				<!-- 提交 -->
				<button v-if="handleData.action !=='FINISH'">提交</button>
				<!-- 办结 -->
				<button v-else>办结</button>
			</view>

		</view>

		<!-- 报修师傅列表 -->
		<u-picker mode="selector" confirm-color="#1585FC" v-model="pickerShow" :default-selector="selectorIndex"
			:range="selectorObj" range-key="staffName" @confirm="cycleChange"></u-picker>

		<!-- 是否收费 -->
		<u-picker mode="selector" confirm-color="#1585FC" v-model="feePickerShow" :default-selector="feePickerIndex"
			:range="feeCloums" range-key="name" @confirm="feeChange"></u-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		listRepairTypeUsers,
		repairDispatch,
		repairFinish
	} from 'api/repair';
	export default {
		data() {
			return {
				// 选择器
				pickerShow: false,
				selectorObj: [], //报修师傅列表
				selectorIndex: [0], //报修师傅下标
				handleData: {
					staffId: '', //员工编号
					staffName: '', //员工姓名
					context: '', //报修内容
					repairId: '', //报修编号
					repairType: '', //报修类型
					action: '', //操作
					communityId: '', //小区id
					userId: '', //用户编号
					userName: '', //用户姓名
					photos: [], //图片
				},
				repairObjType: '', //用于判断  是否收费
				feeCloums: [{
						id: 200,
						name: '否'
					},
					{
						id: 100,
						name: '是'
					}
				],
				feePickerShow: false, //是否收费选项
				amount: 0.0, //收费金额
				feePickerIndex: [0], //是否收费下标
				feeFlag: '200',
				feeFlagName: '否', //收费选项显示
			};
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onLoad(options) {
			console.log('options', options)
			this.handleData.action = options.action;
			this.handleData.repairId = options.repairId;
			this.handleData.repairType = options.repairType;
			this.repairObjType = options.repairObjType;

			this.handleData.userId = this.userInfo.userId;
			this.handleData.userName = this.userInfo.userName;
			this.handleData.communityId = this.userCommunity.communityId
			if (this.handleData.action == 'BACK' || this.handleData.action == 'FINISH') {
				this.handleData.staffId = options.preStaffId
				this.handleData.staffName = options.preStaffName
			}

			this.getListRepairTypeUsers()
		},
		methods: {
			/**
			 * 获取师傅列表
			 */
			getListRepairTypeUsers() {
				var that = this
				let data = {
					repairType: this.handleData.repairType,
					communityId: this.userCommunity.communityId,
					state: '9999',
					page: 1,
					row: 50,
				}

				listRepairTypeUsers(data).then((res) => {
					console.log('获取报修师傅', res)
					if (res.code == 0) {
						that.selectorObj = res.data
					}
				})
			},
			/**
			 * 选择维修师傅弹窗层
			 */
			openPicker(key) {
				this.pickerShow = true
			},
			/**
			 * 选择维修师傅
			 */
			cycleChange(e) {
				let index = e[0]
				this.selectorIndex = [index]
				console.log('index', index)
				for (let i = 0; i <= this.selectorObj.length; i++) {
					if (i == index) {
						this.handleData.staffName = this.selectorObj[i].staffName
						this.handleData.staffId = this.selectorObj[i].staffId
					}
				}
				console.log('师傅列表', this.selectorObj)
				console.log('师傅名字', this.handleData.staffName)
			},
			/**
			 * 选择是否收费弹窗层
			 */
			openPickerFee(key) {
				this.feePickerShow = true
			},
			/**
			 * 选择是否收费
			 */
			feeChange(e) {
				let index = e[0]
				this.feePickerIndex = [index]
				console.log('--', this.feePickerIndex)
				for (let i = 0; i <= this.feeCloums.length; i++) {
					if (i == index) {
						this.feeFlag = this.feeCloums[i].id
						this.feeFlagName = this.feeCloums[i].name
					}
				}
			},
			/**
			 * 图片上传列表
			 */
			photosList(data) {
				console.log('photosList', data)
				this.handleData.photos = data
			},
			/**
			 * 提交(包含指派，转单，办结)
			 */
			submit() {
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 上一页
				
				
				var that = this
				if (this.handleData.action == 'FINISH') { //办结
					this.handleData.amount = this.amount
					this.handleData.feeFlag = this.feeFlag
					this.handleData.storeId = this.userInfo.storeId
					this.handleData.repairObjType = this.repairObjType
					delete this.handleData.staffId
					delete this.handleData.staffName
					repairFinish(this.handleData).then((res) => {
						console.log('办结成功', res)
						if (res.code == 0) {
							beforePage.onLoad()
							if (that.handleData.action == 'FINISH') { //办结
								uni.showToast({
									title: '办结成功',
									icon: 'none',
									duration: 1500
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
						}
					})
					return;
				}
				
				repairDispatch(this.handleData).then((res) => {
					console.log('指派成功', res)
					if (res.code == 0) {
						beforePage.onLoad()
						if (that.handleData.action == 'DISPATCH') { //指派
							uni.showToast({
								title: '指派成功',
								icon: 'none',
								duration: 1500
							})
						} else if (that.handleData.action == 'BACK') { //退单
							uni.showToast({
								title: '退单成功',
								icon: 'none',
								duration: 1500
							})
						} else if (that.handleData.action == 'TRANSFER') { //转单
							uni.showToast({
								title: '转单成功',
								icon: 'none',
								duration: 1500
							})
						}
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.nl-flex-title {
		border-bottom: none
	}

	.textarea-padding {
		padding: 0 24rpx 24rpx;
		border-bottom: 2rpx solid $uni-bg-color-grey;
	}
</style>
